.area{
    position: absolute;
    text-align: center;

    z-index: 1;
}
.area span{
    font-size: 24px;
    color: #ffc000;
}
.area.hover{
    opacity: 0.4;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    border-radius:4px;
    background-color: #CCCCCC;
    box-shadow: 3px 3px 3px #000;
}
.area.cur{
    opacity: 0.4;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    border-radius:4px;
    background-color: #CCCCCC;
    box-shadow: 3px 3px 3px #000;
    border:6px solid #7c5e03 ;
}

.area.open{
    background-color: #f4dc1f;
    opacity: 0.3;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    box-shadow: 3px 3px 3px #000;
}
.img-l{
    top: 8%;
    z-index: 2;
    cursor: pointer;
}
.img-l-1{
    top: 2%;
    left: 50%;
}
.img-l-2[data-id="1"]{
    left: 20%;
}
.img-l-2[data-id="2"]{
    left: 42%;
}
.img-l-2[data-id="3"]{
    left: 64%;
}

.area3{
    top: 0;
    left: 6%;
    width: 88%;
    height: 20%;
    /*line-height: 40px;*/
    text-align: center;
}
.area2{
    top: 1%;
    width: 20%;
    height: 20%;
}
.area2[data-id="1"]{
    left: 12%;
}
.area2[data-id="2"]{
    left: 33%;
}
.area2[data-id="3"]{
    left: 54.6%;
}

.device-coordinate-item > img{
    width:4%;
    /*height: 4%;*/
    position: absolute;
    z-index: 2;
    display: block;
}
.regio4{
    width: 20%;
    height: 40%;
}
.regioB{
    width: 75%;
}